<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Video.js Playlist UI - Default Implementation</title>
  <link href="js/videojs/video-js.css" rel="stylesheet">
  <link href="js/videojs-playlist-ui.css" rel="stylesheet">
  <link href="examples.css" rel="stylesheet">
</head>
<body>
  <div class="info">
    <h1>Video.js Playlist UI - Default Implementation</h1>
    <p>
      You can see the Video.js Playlist UI plugin in action below. Look at the
      source of this page to see how to use it with your videos.
    </p>
    <p>
      In the default configuration, the plugin looks for the first element that
      has the class "vjs-playlist" and uses that as a container for the list.
    </p>
  </div>

  <style>
    .player-container, .vjs-playlist {
      height: 300px;
    }
	/*
  We include some minimal custom CSS to make the playlist UI look good
  in this context.
*/

body {
  font-family: Arial, sans-serif;
}

.info {
  background-color: #eee;
  border: thin solid #333;
  border-radius: 3px;
  margin: 0 0 20px;
  padding: 0 5px;
}

.player-container {
  background: #1a1a1a;
  overflow: auto;
  width: 900px;
  margin: 0 0 20px;
}

.video-js {
  float: left;
}

.vjs-playlist,
.my-custom-class,
#my-custom-element {
  float: left;
  width: 300px;
}

.vjs-playlist.vjs-playlist-horizontal {
  float: none;
  height: 120px;
  width: 600px;
}

  </style>

  <div class="player-container">
    <video
      id="video"
      class="video-js"
      height="300"
      width="600"
      controls>
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    </video>

    <div class="vjs-playlist">
      <!--
        The contents of this element will be filled based on the
        currently loaded playlist
      -->
    </div>
  </div>

  <script src="js/videojs/video.js"></script>
  <script src="js/videojs-playlist.js"></script>
  <script src="js/videojs-playlist-ui.js"></script>
  <script>
    var player = videojs('video');

    player.playlist([{
      name: 'Disney\'s Oceans 1',
      description: 'Explore the depths of our planet\'s oceans. ' +
        'Experience the stories that connect their world to ours. ' +
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
        'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
        'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ' +
        'laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure ' +
        'dolor in reprehenderit in voluptate velit esse cillum dolore eu ' +
        'fugiat nulla pariatur. Excepteur sint occaecat cupidatat non ' +
        'proident, sunt in culpa qui officia deserunt mollit anim id est ' +
        'laborum.',
      duration: 45,
      sources: [
        { src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' },
        { src: 'http://vjs.zencdn.net/v/oceans.webm', type: 'video/webm' },
      ],

      // you can use <picture> syntax to display responsive images
      thumbnail: [
        {
          srcset: 'test/example/oceans.jpg',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
        {
          src: 'test/example/oceans-low.jpg'
        }
      ]
    },
    {
      name: 'Disney\'s Oceans 2',
      description: 'Explore the depths of our planet\'s oceans. ' +
        'Experience the stories that connect their world to ours. ' +
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
        'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
        'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ' +
        'laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure ' +
        'dolor in reprehenderit in voluptate velit esse cillum dolore eu ' +
        'fugiat nulla pariatur. Excepteur sint occaecat cupidatat non ' +
        'proident, sunt in culpa qui officia deserunt mollit anim id est ' +
        'laborum.',
      duration: 45,
      sources: [
        { src: 'http://vjs.zencdn.net/v/oceans.mp4?2', type: 'video/mp4' },
        { src: 'http://vjs.zencdn.net/v/oceans.webm?2', type: 'video/webm' },
      ],

      // you can use <picture> syntax to display responsive images
      thumbnail: [
        {
          srcset: 'test/example/oceans.jpg?2',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
        {
          src: 'test/example/oceans-low.jpg?2'
        }
      ]
    },
    {
      name: 'Disney\'s Oceans 3',
      description: 'Explore the depths of our planet\'s oceans. ' +
        'Experience the stories that connect their world to ours. ' +
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
        'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
        'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ' +
        'laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure ' +
        'dolor in reprehenderit in voluptate velit esse cillum dolore eu ' +
        'fugiat nulla pariatur. Excepteur sint occaecat cupidatat non ' +
        'proident, sunt in culpa qui officia deserunt mollit anim id est ' +
        'laborum.',
      duration: 45,
      sources: [
        { src: 'http://vjs.zencdn.net/v/oceans.mp4?3', type: 'video/mp4' },
        { src: 'http://vjs.zencdn.net/v/oceans.webm?3', type: 'video/webm' },
      ],

      // you can use <picture> syntax to display responsive images
      thumbnail: [
        {
          srcset: 'test/example/oceans.jpg?3',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
        {
          src: 'test/example/oceans-low.jpg?3'
        }
      ]
    },
    {
      name: 'Disney\'s Oceans 4',
      description: 'Abc.',
      duration: 45,
      sources: [
        { src: 'http://vjs.zencdn.net/v/oceans.mp4?4', type: 'video/mp4' },
        { src: 'http://vjs.zencdn.net/v/oceans.webm?4', type: 'video/webm' },
      ],

      // you can use <picture> syntax to display responsive images
      thumbnail: [
        {
          srcset: 'test/example/oceans.jpg?4',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
        {
          src: 'test/example/oceans-low.jpg?4'
        }
      ]
    },
    {
      name: 'Disney\'s Oceans 5',
      description: 'Abc.',
      duration: 45,
      sources: [
        { src: 'http://vjs.zencdn.net/v/oceans.mp4?5', type: 'video/mp4' },
        { src: 'http://vjs.zencdn.net/v/oceans.webm?5', type: 'video/webm' },
      ],

      // you can use <picture> syntax to display responsive images
      thumbnail: [
        {
          srcset: 'test/example/oceans.jpg?5',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
        {
          src: 'test/example/oceans-low.jpg?5'
        }
      ]
    },
    {
      name: 'Disney\'s Oceans 6',
      description: 'Abc.',
      duration: 45,
      sources: [
        { src: 'http://vjs.zencdn.net/v/oceans.mp4?6', type: 'video/mp4' },
        { src: 'http://vjs.zencdn.net/v/oceans.webm?6', type: 'video/webm' },
      ],

      // you can use <picture> syntax to display responsive images
      thumbnail: [
        {
          srcset: 'test/example/oceans.jpg?6',
          type: 'image/jpeg',
          media: '(min-width: 400px;)'
        },
        {
          src: 'test/example/oceans-low.jpg?6'
        }
      ]
    }, {
      name: 'Sintel (No Thumbnail)',
      description: 'The film follows a girl named Sintel who is searching for a baby dragon she calls Scales.',
      sources: [
        { src: 'http://media.w3.org/2010/05/sintel/trailer.mp4', type: 'video/mp4' },
        { src: 'http://media.w3.org/2010/05/sintel/trailer.webm', type: 'video/webm' },
        { src: 'http://media.w3.org/2010/05/sintel/trailer.ogv', type: 'video/ogg' }
      ],
      thumbnail: false
    },

    // This is a really underspecified video to demonstrate the
    // behavior when optional parameters are missing. You'll get better
    // results with more video metadata!
    {
      name: 'Invalid Source',
      sources: [{
        src: 'Invalid'
      }]
    }]);

    // Initialize the playlist-ui plugin with no option (i.e. the defaults).
    player.playlistUi();
  </script>
</body>
</html>
